<!-- import 'NavMenu' from './NavMenu.vue'; -->
<script setup>
import { ref } from 'vue';
import {getFarmer } from '../../api'
import { useRouter } from 'vue-router';
const router = useRouter();
import { removeToken } from '../../utils/auth';
const quickNavItems = [
  { title: 'Home', route: '/' },
  { title: 'Dashboard', route: '/dashboard' },
  { title: 'Profile', route: '/profile' },
];

const userInfo = {
  name: 'John Doe',
  avatar: 'https://example.com/avatar.jpg',
};

 async function  handleQuickNavItemClick(item) {
  // Handle navigation or any other action for the clicked item
//   console.log('Clicked item:', item);
//   let res = await getFarmer()
// console.log(res)
}

function handleLogout() {
  // Implement your logout logic here
  console.log('Logout button clicked');
  router.push('/login');
  removeToken();
  console.log('退出');
}
</script>

<template>
    <header class="header">
      <div class="header__left">
        <h1 class="header__logo">庆云动监所</h1>
        <ul class="header__quick-nav">
          <li v-for="(item, index) in quickNavItems" :key="index" class="header__quick-nav-item">
            <button class="header__quick-nav-link" @click="handleQuickNavItemClick(item)">
              {{ item.title }}
            </button>
          </li>
        </ul>
      </div>
      <div class="header__right">
        <div class="header__user-info">
          <!-- <img :src="userInfo.avatar" alt="User Avatar" class="header__user-avatar"> -->
          <span class="header__user-name">{{ userInfo.name }}</span>
        </div>
        <button class="header__logout-btn" @click="handleLogout">退出登录</button>
      </div>
    </header>
  </template>
  <style>
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  --el-header-padding:0
}

/* 头部样式 */
.el-header{
    --el-header-padding:0
}
.header {
    margin:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 24px;
  background-color: #f0f5fb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.header__left,
.header__right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  font-size: 24px;
  font-weight: bold;
  color: #3a4960;
  margin-right: 24px;
}

.header__quick-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
}

.header__quick-nav-item {
  position: relative;
}

.header__quick-nav-link {
  display: inline-block;
  padding: 16px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #3a4960;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.header__quick-nav-link:hover {
  background-color: rgba(62, 7.jpg, 93, 0.1);
}

.header__user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.header__user-name {
  font-size: 14px;
  font-weight: 500;
  color: #3a4960;
}

.header__logout-btn {
    margin-left: auto;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background-color: #3a4960;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.header__logout-btn:hover {
  background-color: #2c394b;
}

</style>